import 'package:flutter/cupertino.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class MediaQueryPage extends PageWithTitle {
  const MediaQueryPage() : super("设备媒体信息查询(MediaQuery)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("MediaQuery 是 Flutter 框架中用于响应式设计的核心类，它可以让应用根据设备的"
          "屏幕尺寸、方向、像素密度等属性自动调整 UI 布局。"),
      AppSpacer.large,
      _DeviceInfo(),
      UlItem("MediaQuery"),
      AppSpacer.large,
      OlItem(1, "of maybeOf"),
      BodyText("媒体查询的一大作用就是查询当前设备的媒体信息，通过of相关函数传入context订阅"
          "相关参数变化，当参数变化时订阅的相关组件会被重建"),
      NoticeText("直接使用of函数时，所有媒体信息的变化都会导致重建，这会导致非常大的性能损耗，"
          "所以MediaQuery提供了各个参数的of函数变种实现单一参数的订阅，例如sizeOf,orientationOf"),
      NoticeText("官方的建议是动态布局若可以通过LayoutBuilder去实现则尽量不使用MediaQuery"),
      LabelText("- 尺寸（size）：屏幕的物理尺寸（如 375×812）。"),
      LabelText("- 方向（orientation）：横屏或竖屏。"),
      LabelText("- 像素密度（devicePixelRatio）：用于处理不同分辨率的设备。"),
      LabelText("- 状态栏高度（padding.top）：避免内容被状态栏遮挡。"),
      LabelText("- 文本缩放因子（textScaleFactor）：用户的字体大小偏好。"),
      AppSpacer.large,
      _OverrideConfig(),
      OlItem(2, "覆盖默认配置"),
      BodyText("自主构建新的MediaQuery，它本身是一个widget，通过修改MediaQueryData对其子"
          "组件产生影响来实现覆盖默认配置，若在App widget中使用就会对整个应用产生影响，这对需"
          "要在应用内全局设置文本缩放比例来讲非常方便"),
    ];
  }
}

class _OverrideConfig extends StatelessWidget {
  const _OverrideConfig();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("默认文本样式"),
        MediaQuery(
            data: MediaQuery.of(context).copyWith(
              textScaler: const TextScaler.linear(1.2),
              boldText: true,
            ),
            child: const Text("放大1.2倍并加粗")),
      ],
    );
  }
}

class _DeviceInfo extends StatelessWidget {
  const _DeviceInfo();

  @override
  Widget build(BuildContext context) {
    MediaQueryData mediaQueryData = MediaQuery.of(context);
    final mediaQueryDataInfos = [
      "可用参数:",
      'size: ${mediaQueryData.size}',
      'orientation: ${mediaQueryData.orientation}',
      'devicePixelRatio: ${mediaQueryData.devicePixelRatio.toStringAsFixed(1)}',
      'textScaler: ${mediaQueryData.textScaler}',
      'platformBrightness: ${mediaQueryData.platformBrightness}',
      'padding: ${mediaQueryData.padding}',
      'viewPadding: ${mediaQueryData.viewPadding}',
      'viewInsets: ${mediaQueryData.viewInsets}',
      'systemGestureInsets: ${mediaQueryData.systemGestureInsets}',
      'alwaysUse24HourFormat: ${mediaQueryData.alwaysUse24HourFormat}',
      'accessibleNavigation: ${mediaQueryData.accessibleNavigation}',
      'highContrast: ${mediaQueryData.highContrast}',
      'onOffSwitchLabels: ${mediaQueryData.onOffSwitchLabels}',
      'disableAnimations: ${mediaQueryData.disableAnimations}',
      'invertColors: ${mediaQueryData.invertColors}',
      'boldText: ${mediaQueryData.boldText}',
      'navigationMode: ${mediaQueryData.navigationMode.name}',
      'gestureSettings: ${mediaQueryData.gestureSettings}',
      'displayFeatures: ${mediaQueryData.displayFeatures}',
    ];
    return Text(mediaQueryDataInfos.join("\n"));
  }
}
